<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数参数的解构赋值</title>
</head>
<body>
  <script>
    // 函数的参数也可以使用解构赋值
    function add([x,y]) {
      return x + y
    }
    add([1,2]) // 3
    /*
    上面代码中，函数add的参数表面上是一个数组，但是在传入参数的那一刻，数组参数就被解构成变量x和y.
    对于函数内部的代码来说，它们能感受到的参数就是x和y
    */
   [[1,2], [3,4]].map(([a,b]) => a + b)
   // [3, 7]
  </script>
  <script>
    // 函数参数的解构也可以使用默认值
    function move({x=0, y=0}) {
      console.log([x, y])
    }
    move({x:3, y:8}) // [3,8]
    move({x:3}) // [3,0]
    move({}) // [0, 0]
    move() // [0, 0]
    /*
    上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值，如果解构失败，x和y等于默认值。
    注意： 下面的写法会得到不一样的结果
    */
  </script>
  <script>
     function move({x,y}= {x:0, y:0}) { //这里的参数是一个对象{x,y} 默认值是 {x:0, y:0}
      console.log([x, y])
    }
    move({x:3, y:8}) // [3,8]
    move({x:3}) // [3,undefined]
    move({}) // [undefined,undefined]
    move() // [0, 0]
    /*
    上面的代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果
    undefined就出触发函数参数的默认值
    */
   var arr = [1,undefined,3].map((x='yes') => x)
   console.log(arr) // [1, 'yes', 3]
  </script>
</body>
</html>